<template>
  <div class="completion-rate-root">
    <div class="row-item">
      <div style="font-size: 18px;">报工数</div>
        <div class="col-item"
          v-for="(item,index) in planList" :key="`d-${index}`"
        >
          <div :class="`data${index+1}`">
            <div class="qiu">
                <p>{{ item.value }}</p>
            </div>
            <span>{{ item.label }}</span>
          </div>
        </div>
    </div>
    <div class="row-item">
      <div style="font-size: 18px;">合格数</div>
        <div class="col-item"
          v-for="(item,index) in monthList" :key="`d-${index}`"
        >
          <div :class="`data${index+1}`">
            <div class="qiu">
                <p>{{ item.value }}</p>
            </div>
            <span>{{ item.label }}</span>
          </div>
        </div>
     </div>
    <div class="row-item">
      <div style="font-size: 18px;">报废数</div>
        <div class="col-item"
          v-for="(item,index) in dayList" :key="`d-${index}`"
        >
          <div :class="`data${index+1}`">
            <div class="qiu">
                <p>{{ item.value }}</p>
            </div>
            <span>{{ item.label }}</span>
          </div>
        </div>
     </div>
  </div>
</template>
<script>
import {getScrapWcApi} from '../../../api/product/index.js'
export default {
  data() {
    return {
      planList: [],
      monthList: [],
      dayList: [],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const _that = this
      getScrapWcApi({pkCorp: 1002}).then(res => {
        const {code,data} = res,planList = [],monthList = [],dayList = []
        if(code === 2000) {
          data.forEach(item => {
            planList.push({
              label: item.wc_name,
              value: item.report_qty
            })
            monthList.push({
              label: item.wc_name,
              value: item.qualifiedQty
            })
            dayList.push({
              label: item.wc_name,
              value: item.scrapQty
            })
            _that.planList = planList
            _that.monthList = monthList
            _that.dayList = dayList
          });
        }
        // console.log('getDispatchInfoApi', res)
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .completion-rate-root {
    width: 100%;height: 100%;padding: 12px;display: flex;flex-direction: column;
    .row-item {
      flex: 1;display: flex;flex-direction: row;align-items: center;justify-content: center;
      .col-item {
        flex: 1;position: relative;display: flex;align-items: center;justify-content: center;
      }
    }
  }
  .data1,.data2,.data3,.data4 {
      color:#fff;
      text-align: center;
      position: absolute;
      width: 6rem;
      height: 6rem;
      background: url(../../../assets/golbal_info/di.png) no-repeat bottom center;
      background-size: contain;
      box-sizing: border-box;
      // animation: circle 5s linear infinite;
      .qiu {
          position: relative;
          width: 3rem;
          height: 3rem;
          margin: auto;
          display: table;
          p {
              display:table-cell;
              vertical-align: middle;
          }
          // animation: circle 5s linear infinite;
          animation: float 8s linear infinite;
      }
      .qiu::before {
          content:'';
          display: block;
          width: 3rem;
          height: 3rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform:translate(-50%,-50%);
          border-radius: 50%;
          border:3px solid rgba(255,255,255,.5);
          animation:scale 2s linear infinite;
      }
      span {
          font-size: 1rem;
      }
  }
  .data1 {
      .qiu {
          background: url(../../../assets/golbal_info/cicle01.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data2 {
      .qiu {
          background: url(../../../assets/golbal_info/cicle02.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data3 {
      .qiu {
          background: url(../../../assets/golbal_info/cicle03.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data4 {
      .qiu {
          background: url(../../../assets/golbal_info/cicle04.png) no-repeat center;
          background-size: 100%;
      }
  }
  @keyframes scale{
      0%{
          transform:translate(-50%,-50%) scale(0.9);
          opacity: 1;
      }
      100%{
          transform:translate(-50%,-50%) scale(1.5);
          opacity: 0;
      }
  }
  // 旋转动画
  @keyframes circle {
      0% {
          transform: rotateX(70deg) rotateZ(0);
      }

      100% {
          transform: rotateX(70deg) rotateZ(360deg);
      }
  }
  // 上下浮动动画
  @keyframes float {
      0% {
          transform: translateY(0%)
      }

      25% {
          transform: translateY(-25%)
      }

      50% {
          transform: translateY(0%)
      }

      75% {
          transform: translateY(-25%)
      }

      100% {
          transform: translateY(0%)
      }
  }
</style>
